<template>
  <div style="background-color: #ffffff;height: 352px">
    <div>
      <van-nav-bar
          title="验证身份"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <div style="float: left;margin-top: 30px;margin-left: 20px">
      <span style="font-size: 40px">安全验证</span>
    </div>
    <div class="hint">
      <span>请输入 <b style="color: #000000">+{{userMsg.phone}}</b> 收到的短信验证码，以完成身份验证~</span>
    </div>
    <div style="margin-top: 250px;height: 100px">
      <div>
        <van-field
            style="margin: 10px 0;"
            v-model="inputCode"
            placeholder="请输入验证码"
            maxlength="6"
            :error-message="errorMessage"
            @blur="errorMessage = ''"
        />
        <van-button id="but" color="#f2f2f2" type="info" round @click="onclick"><p style="color: #189cd5">{{ sendBtnText }}</p></van-button>
        <hr style="width: 90%;margin: 0 auto;color: #f2f2f2"/>
      </div>
      <div>
        <div>
          <van-button class="but1" color="#189cd5" round  size="large" @click="verification">确定</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      inputCode:'',
      errorMessage: '',
      userMsg:{},
      sendBtnText:"获取验证码",
      counter: 60,
      bankMsg:{}
    };
  },
  mounted() {
    let parse = JSON.parse(localStorage.getItem('login'));
    if(parse!=null){
      this.userMsg=parse
    }
    let country = this.$route.query.country;
    let bank = this.$route.query.bank;
    let bankCardNum = this.$route.query.bankCardNum;
    if(country!=null||country!=''){
      this.bankMsg.country=country
    }
    if(bank!=null||bank!=''){
      this.bankMsg.bank=bank
    }
    if(bankCardNum!=null||bankCardNum!=''){
      this.bankMsg.bankCardNum=bankCardNum
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({
        path: '/bankcard'
      })
    },
    verification() {
      this.bankMsg.registerIp=this.userMsg.registerIp
      this.bankMsg.accountPeople=this.userMsg.name
      this.bankMsg.accountStatus=1
      // 先根据输入验证码判断是否正确
      axios.get('http://localhost:11219/mine/bankcard/verification/'+this.inputCode+"/"+this.userMsg.phone).then(res=>{
        if(res.data.code==200){
          this.$toast('验证成功');
          // 正确则直接更改否则失败
          axios.post('http://localhost:11219/mine/bankcard/addbankcard',this.bankMsg).then(res1=>{
            if(res1.data.code==200){
              this.$toast('添加成功');
              this.$router.push({
                path: '/bankcard'
              })
            }else{
              this.$toast('添加失败');
            }
          })
        }else{
          this.$toast('验证失败');
        }
      })
    },
    onclick(){
      this.countDown()
      this.yzm()
    },
    // 倒计时
    countDown() {
      this.timer = setInterval(() => {
        this.sendBtnText = `${this.counter}秒`
        this.counter--
        if (this.counter < 0) {
          this.sendBtnText = '获取验证码'
          clearInterval(this.timer)
          this.counter = 60
        }
      }, 1000)
    },

    // 发送验证码
    yzm() {
      axios.get('http://localhost:11219/express/express/vc/' + this.userMsg.phone).then(res => {
        if (res.data.code == 200) {
          this.$toast.success('验证码发送成功');
        } else {
          this.$toast.fail('验证码发送失败');
        }
      })
    },
  }
}
</script>

<style scoped>
.hint{
  float: left;
  margin: 15px;
}
.hint span{
  display:inline-block;
  text-align: left;
  font-size: 15px;
  color: #9ca1a7;
}
#but{
  width: 120px;
  height: 30px;
  float: right;
  margin-top: -48px;
  margin-right: 20px;
}
.but1{
  width: 90%;
  margin-top: 50px
}
</style>
